<template>
  <div class="box">
    <!-- 搜索框 -->
    <div class="box1">
      <div class="search-index">
        <div class="shuxian"></div>
        <router-link to="/">
          <i class="jiantou iconfont icon-jiantou2"></i>
        </router-link>
        <input class="search-input" type="text" value="请输入内容" />
        <i class="anniu iconfont icon-sousuokuang"></i>
      </div>
    </div>
    <div class="box2">
      <div class="yimiao">
        <div class="yimiao1">
          <img class="xinguan" src="../img/17.jpg" alt="" />
          <div class="xinguan1">HPV疫苗</div>
          <h6 class="xinguan2">预防宫颈癌</h6>
        </div>
        <div class="yimiao1" style="width:75px;">
          <img
            class="xinguan"
            style="margin-left:12px"
            src="../img/23.jpg"
            alt=""
          />
          <div class="xinguan1">肺炎疫苗</div>
          <h6 class="xinguan2">预防肺炎球菌</h6>
        </div>
        <div class="yimiao1" style="width:85px;">
          <img
            class="xinguan"
            style="margin-left:17px"
            src="../img/19.jpg"
            alt=""
          />
          <div class="xinguan1">带状疱疹疫苗</div>
          <h6 class="xinguan2">带父母预约</h6>
        </div>
        <div class="yimiao1">
          <img class="xinguan" src="../img/21.jpg" alt="" />
          <div class="xinguan1">乙肝疫苗</div>
          <h6 class="xinguan2">预防肝癌</h6>
        </div>
      </div>
      <div class="yimiao">
        <div class="yimiao1">
          <img class="xinguan" src="../img/20.jpg" alt="" />
          <div class="xinguan1">流感疫苗</div>
          <h6 class="xinguan2">保护全家</h6>
        </div>
        <div class="yimiao1" style="width:75px;">
          <img
            class="xinguan"
            style="margin-left:12px"
            src="../img/22.jpg"
            alt=""
          />
          <div class="xinguan1">狂犬病疫苗</div>
          <h6 class="xinguan2">宠物推荐接种</h6>
        </div>
        <div class="yimiao1" style="width:85px;">
          <img
            class="xinguan"
            style="margin-left:17px"
            src="../img/18.jpg"
            alt=""
          />
          <div class="xinguan1">新冠肺炎疫苗</div>
          <h6 class="xinguan2">全民接种</h6>
        </div>
        <div class="yimiao1">
          <i class="xin iconfont icon-duosefuzhu-gengduotiaojian1"></i>
          <div class="xin1">更多</div>
        </div>
      </div>
    </div>
    <div class="box3">
      <img class="fuwu" src="../img/24.jpg" alt="" />
      <button class="anniu1">立即预约</button>
    </div>
    <div class="box4">
      <h2 class="jiankang">健康服务</h2>
      <i class="jiantou1 iconfont icon-arrow-right-copy-copy-copy"></i>
    </div>
    <div class="box5">
      <div class="jiankang1">
        <h2 class="shangxin">疫苗上新</h2>
        <button class="goto"><i class="go iconfont icon-go1"></i></button>
        <i class="go2 iconfont icon-yimiao1"></i>
      </div>
      <div class="jiankang1">
        <h2 class="shangxin">健康体检</h2>
        <button class="tijian">预约</button>
        <i
          class="go2 iconfont icon-jiankangtijian1"
          style="color:rgb(232, 149, 247)"
        ></i>
      </div>
      <div class="jiankang1">
        <h2 class="shangxin">商城购买</h2>
        <button class="goto"><i class="go iconfont icon-go1"></i></button>
        <i
          class="go2 iconfont icon-goumai"
          style="color:rgb(242, 247, 146)"
        ></i>
      </div>
    </div>
    <div class="box6">
      <img class="hpv" src="../img/26.jpg" alt="" />
      <div class="hpv1">
        <h2 class="hpv2">大家都在抢的 <span style="font-weight: bold;">HPV</span>疫苗。有啥厉害的？真的有必要打吗？</h2>
        <h3 class="hpv3">1.5w</h3>
      </div>
    </div>
    <div class="box6" style="margin-top:8px">
      <img class="hpv" src="../img/25.jpg" alt="" />
      <div class="hpv1">
        <h2 class="hpv2" style="line-height: 65px;">可以预约新冠疫苗了！点我哦</h2>
        <h3 class="hpv3" style="">1.5w</h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
/* 第一部分搜索框 */
.box1 {
  width: 100%;
  height: 50px;
  //   background-color: rgb(226, 232, 235);
}

a {
  text-decoration: none;
  color: #222;
}

/* 搜索框 */
.search-index {
  position: fixed;
  display: flex;
  width: 100%;
  height: 44px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 540px;
  min-width: 320px;

  /*background-color: aqua;*/
}

/* 搜索按钮 */
.anniu {
  position: absolute;
  left: 4%;
  top: 5%;
  left: 12%;
  z-index: 1;
  color: rgba(0, 186, 173, 1);
  font-size: 25px;
}
.search-input {
  position: relative;
  border: 1px solid #ccc;
  flex: 1;
  font-size: 12px;
  color: #666;
  margin: 7px 10px;
  padding-left: 25px;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-top: -0.5%;
  text-align: center;
  line-height: 20px;
  height: 29px;
  padding: 0px;
}

.search-input::before {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 15px;
  height: 15px;
  // background: url(../images/sprite.png) no-repeat -59px -279px;
  background-size: 104px auto;
}
.jiantou {
  display: block;
  font-size: 22px;
  margin-top: 5px;
}
.box2 {
  width: 100%;
  height: 180px;
  // background: rgb(239, 240, 240);
}
.yimiao {
  width: 100%;
  height: 90px;
  // background: black;
  display: flex;
  justify-content: space-around;
}
.yimiao1 {
  width: 60px;
  height: 90px;
  // background: rgb(112, 117, 117);
}
.xinguan {
  width: 50px;
  height: 50px;
  margin-left: 4px;
}
.xinguan1 {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.xinguan2 {
  font-size: 10px;
  margin-top: 6px;
  text-align: center;
}
.xin {
  display: block;
  font-size: 35px;
  margin-left: 10px;
  margin-top: 10px;
}
.xin1 {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
}
.box3 {
  display: block;
  width: 100%;
  height: 140px;
  // background: chartreuse;
  position: relative;
}
.fuwu {
  width: 100%;
  height: 140px;
  // position: absolute;
  // z-index: -1px;
}
.anniu1 {
  position: absolute;
  display: block;
  // z-index: 999px;
margin-left: 120px;
margin-top: -20px;
border-radius: 20px;
border: 1px solid blue($color: #000000);
width: 90px;
height: 30px;
font-size: 14px;
background: blue($color: #000000);
}
.box4 {
  width: 100%;
  height: 50px;
  // background: chartreuse;
  position: relative;
  // background: rgb(243, 240, 240);
  top: 4px;
}
.jiankang {
  line-height: 50px;
  position: absolute;
  left: 4px;
  font-weight: bold;
}
.jiantou1 {
  display: block;
  float: right;
  line-height: 40px;
  margin-top: 6px;
  margin-right: 4px;
}
.box5 {
  width: 100%;
  height: 110px;
  // background: aqua;
  display: flex;
  justify-content: space-around;
}
.jiankang1 {
  width: 100px;
  height: 80px;
  background: rgb(148, 241, 235);
  margin: auto;
}
.shangxin {
  margin-left: 20px;
  margin-top: 17px;
  // color:rgb(255, 139, 158);
  color: #222;
  font-weight: bold;
  font-size: 14px;
}

.go {
  display: block;
  color: rgb(251, 219, 219);
}
.goto {
  border-radius: 8px;
  display: block;
  margin-top: 6px;
  // background: rgb(255, 139, 158);
   background: red;
  margin-left: 15px;
  position: absolute;
}
.go2 {
  display: block;
  font-size: 35px;
  color: rgb(97, 176, 245);
  float: right;
  margin-top: 12px;
}
.tijian {
  border-radius: 8px;
  font-size: 13px;
  background: red;
  color: rgb(251, 219, 219);
  font-weight: bold;
  margin-top: 6px;
  margin-left: 16px;
}
.box6 {
  width: 100%;
  height: 80px;
  background: rgb(241, 243, 243);
  position: relative;
}
.hpv {
  width: 100px;
  height: 80px;
  position: absolute;
  left: 6px;
}
.hpv1 {
  width: 180px;
  height: 80px;
  // background: thistle;
  margin-left: 120px;


}
.hpv2 {
  font-size: 13px;
  line-height: 30px;
  text-align: center;
}
.hpv3{
  font-size: 12px;
  // float: right;
  margin-left: 100%;
}
</style>